<template>
	<div class="app-container">
		<template v-if="flag">
			<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
				<el-form-item label="文章标题" prop="title">
					<el-input
						v-model="queryParams.title"
						placeholder="请输入文章标题"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="作者" prop="author">
					<el-input
						v-model="queryParams.author"
						placeholder="请输入作者"
						clearable
						size="small"
						@keyup.enter.native="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="审核状态" prop="reviewStatus">
					<el-select v-model="queryParams.reviewStatus" placeholder="请选择审核状态" clearable size="small">
						<el-option label="等待审核" :value="0" />
						<el-option label="审核通过" :value="1" />
						<el-option label="未通过" :value="3" />
					</el-select>
				</el-form-item>
				<el-form-item label="审核状态" prop="creationType">
					<el-select v-model="queryParams.creationType" placeholder="请选择创作类型" clearable size="small">
						<el-option label="原创" :value="0" />
						<el-option label="转载" :value="1" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="articleList" style="width: 100%">
				<el-table-column type="index" :index="indexMethod" label="序号" width="80"></el-table-column>
				<el-table-column prop="title" :show-overflow-tooltip="true" width="250" label="文章标题"></el-table-column>
				<el-table-column prop="author" label="作者"></el-table-column>
				<el-table-column prop="typeName" :show-overflow-tooltip="true" width="150" label="分类"></el-table-column>
				<el-table-column prop="approvalStatus" label="审核状态">
					<template slot-scope="scope">
						<span v-if="scope.row.reviewStatus == 0"><el-tag type="warning">等待审核</el-tag></span>
						<span v-if="scope.row.reviewStatus == 1"><el-tag type="success">审核通过</el-tag></span>
						<span v-if="scope.row.reviewStatus == 3"><el-tag type="danger">未通过</el-tag></span>
					</template>
				</el-table-column>
				<el-table-column prop="reviewSpec" :show-overflow-tooltip="true" width="100" label="审批意见"></el-table-column>
				<el-table-column prop="pageView" label="浏览量"></el-table-column>
				<el-table-column prop="collection" label="收藏量"></el-table-column>
				<el-table-column prop="creationType" label="创作类型">
					<template slot-scope="scope">
						<span v-if="scope.row.creationType == 0"><el-tag type="warning">原创</el-tag></span>
						<span v-if="scope.row.creationType == 1"><el-tag type="success">转载</el-tag></span>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope"><el-button type="text" @click="viewArticle(scope.row)">查看</el-button></template>
				</el-table-column>
				<div slot="empty">
					<el-empty description="暂无信息"></el-empty>
				</div>
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		</template>
		<template v-else>
			<div key="inside">
				<el-page-header @back="goBack" content="详情页面">
				</el-page-header>
				<h1 style="text-align: center">{{ currentRow.title }}</h1>
				<div v-html="currentRow.content" style="padding: 20px 50px 50px 50px;overflow: hidden;"></div>
				<div style="display: flex;justify-content: center;align-items: center;">
					<video width="80%" height="300" controls v-if="currentRow.videoUrl">
						<source :src="ossUrl + currentRow.videoUrl" type="video/mp4">
						您的浏览器不支持 HTML5 video 标签。
					</video>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
import { GetArticleList } from '@/api/healthy/article'

export default {
	props: {
		doctorId: {}
	},
	data() {
		return {
			queryParams: {
				pageNum: 0,
				pageSize: 10,
				doctorId: undefined,
				title: undefined,
				author: undefined,
				reviewStatus: undefined,
				creationType: undefined
			},
			articleList: [],
			total: 0,
			flag: true,
			currentRow: {},
			showSearch: true
		};
	},
	mounted() {

	},
	methods: {
		getList() {
			GetArticleList(this.queryParams).then(res => {
				this.articleList = res.rows;
				this.total = res.total;
			})
		},
		viewArticle(row) {
			this.currentRow = row;
			this.flag = false;
		},
		goBack() {
			this.flag = true;
		},
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm("queryForm");
			this.handleQuery();
		},
		indexMethod(index) {
			return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
		}
	},
	watch: {
		doctorId: function() {
			this.queryParams.doctorId = this.doctorId;
			this.getList();
		}
	},
	filters: {
		statusFilter: function(text) {
			if(text == 0) {
				return '等待审核';
			} else if(text == 1) {
				return '审核通过';
			} else {
				return '未通过';
			}
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
